<template>
  <div class="df">
    <el-row style="">
      <el-col>
        <div class="name">{{ good.name }}</div>
      </el-col>
      <el-col>
        <div class="price">￥{{ good.price }}.00</div>
        <div class="line"></div>
      </el-col>
      <el-col>
        <div class="color">
          选择颜色：默认
          <div><img :src="good.img[0]" alt="" class="img" /></div>
        </div>
        <div class="line"></div>
      </el-col>
      <el-col>
        <div class="size">
          <div>选择尺码：{{ sizeChoose }}</div>
          <div style="margin-top: 20px;">
            <el-radio-group fill="#d6000f" text-color="#f1f2ed" v-model="sizeChoose" size="medium">
              <el-radio-button :label="s" v-for="s in sizes" :key="s"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="line"></div>
      </el-col>
      <el-col>
        <div class="num">
          选购数量：
          <el-input-number size="small" v-model="num" :min="1"></el-input-number>
          <span class="num-sp">本款产品每个账号限购5件</span>
        </div>
        <div class="line"></div>
      </el-col>
      <el-col>
        <div class="add">
          <div class="add-cart" @click="addCart(good);">加入购物车</div>
          <div class="pay">立即购买</div>
        </div>
        <div class="line"></div>
      </el-col>
      <el-col>
        <img :src="tip" alt="" class="tip">
        <div class="line"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";
import { getSize,getTip } from "../../assets/data/exhibition.js";
export default {
  data: function () {
    return {
      sizes: getSize(),
      sizeChoose: "",
      num:1,
      tip:getTip()
    };
  },
  computed: {
    ...mapState(["good"]),
    ...mapState(["loginStatus"])
  },
  methods:{
    addCart:function(good) {
      if (!this.loginStatus) {
        this.$router.push('/login')
        return
      }
      if (this.sizeChoose==='') {
        this.$notify({
          title: '加入失败',
          message: '尚未选择任意尺码',
          type: 'error'
        });
        return;
      }
      this.addIntoCart(good)
      this.$notify({
        title: '加入成功',
        message: '快去购物车结算吧',
        type: 'success'
      });
    },
    ...mapMutations(["addIntoCart"])
  }
};
</script>

<style>
.el-radio-button{
  margin-right: 5px;
  margin-top: 5px;
}
.el-radio-button__inner{
  background:#f1f2ed;
  font-weight: bolder;
  color: #000;
}
</style>

<style scoped>
.k {
  border: solid 1px red;
}
.line {
  border: solid 1px gainsboro;
  border-top: none;
}
.df {
  position: absolute;
  left: 995px;
  /* border: 1px solid red; */
  width: 700px;
  height: 800px;
}
.name {
  font-weight: bold;
  font-size: 26px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  /* width: 200px; */
  /* text-align: center; */
}
.price {
  line-height: 57px;
  height: 47px;
  font-size: 17px;
  color: #d6000f;
  font-weight: bold;
}
.color {
  height: 150px;
  line-height: 50px;
  font-weight: bold;
  font-size: 16px;
  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
}
.img {
  width: 85px;
  border: 1px red solid;
}
.size {
  margin-top: 20px;
  height: 150px;
  line-height: 20px;
  font-weight: bold;
  font-size: 16px;
  /* margin-bottom:10px */
  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
}
.num{
  margin-top: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
}
.num-sp{
  font-size: 12px;
  color: rgb(153, 153, 153);
  font-weight: normal;
  margin-left: 20px;
}
.add{
  margin-top: 20px;
  margin-bottom: 20px;
  height: 50px;
  position: relative;
}
.add-cart{
  width: 225px;
  height: 45px;
  background: #d6000f;
  text-align: center;
  line-height: 45px;
  color: #fff;
  cursor: pointer;
}
.pay{
  width: 225px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  color: #fff;
  background: #000;
  position: absolute;
  top: 0;
  left: 240px;
  cursor: not-allowed;
}
.tip{
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  width: 410px;
}
</style>

<style>
</style>